<template>
  <div class="comment">
    <van-field
      ref="fieldRef"
      class="my-field"
      v-model="message"
      rows="2"
      autosize
      label="评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入评论的内容"
      show-word-limit
    />
    <van-button
      class="comment-btn"
      type="primary"
      block
      @click="postComment"
      >发表评论</van-button
    >
    <div class="comment-list">
      <van-card
        v-for="(item, index) in comments"
        :key="index"
        :desc="item.content"
      >
        <template #thumb>
          <div class="user-info">
            <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            <div>匿名用户</div>
          </div>
        </template>
        <template #title>
          <van-rate
            v-model="item.rate"
            readonly
          />
        </template>
        <template #price>{{ item.add_time }} </template>
      </van-card>
      <van-loading
        size="24px"
        v-if="loading"
        >加载中...</van-loading
      >
      <button
        v-else
        class="more"
        @click="getMore"
        :disabled="disabled"
      >
        {{ moreText }}
      </button>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  computed: {
    moreText() {
      return this.hasMore ? '我也是有底线的' : ' 加载更多';
    },
  },
  props: ['id'],
  data() {
    return {
      message: '',
      page: 0,
      limit: 100,
      comments: [],
      loading: false,
      hasMore: false,
      disabled: false,
    };
  },
  created() {
    this.getComments();
  },
  methods: {
    async getComments() {
      // 如果数据已经到达临界点，终止之后的代码
      if (this.hasMore !== false) {
        this.disabled = true;
        return;
      }
      ++this.page;
      const res = await this.$http.getComments({ id: this.id, page: this.page, limit: this.limit });
      // this.comments = this.comments.concat(res.data.message);
      this.comments = [...this.comments, ...res.data.message];
      // 计算是否到达临界点
      this.hasMore = this.page * this.limit > res.data.count;
    },
    async postComment() {
      if (!this.message) return;
      await this.$http.postComment(this.id, this.message);
      this.comments.unshift({
        id: Date.now(),
        user_name: '匿名用户',
        add_time: moment().format('YYYY-MM-DD HH:mm:ss'),
        content: this.message,
        rate: 5,
      });
      this.message = '';
      this.$refs.fieldRef.focus();
    },
    getMore() {
      this.loading = true;
      this.timer = setTimeout(() => {
        this.getComments();
        this.loading = false;
      }, 1000);
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>
<style lang="scss" scoped>
.comment {
  .my-field {
    border: 1px solid #eee;
  }
  .comment-btn {
    margin: 10px 0;
  }
  .van-icon {
    font-size: 60px;
  }
  .van-card__desc {
    margin-top: 15px;
  }
  .more {
    width: 100%;
    outline: none;
    border: 0;
    background-color: #fff;
    font-size: 12px;
    color: #969799;
  }
  .van-loading {
    text-align: center;
  }
}
</style>
